<template>
  <div class="container">
    <div class="login-wrapper">
      <div class="header">登录</div>
      <div class="form-wrapper">
        <el-form
            ref="ruleFormRef"
            :model="loginForm"
            :rules="rules"
            label-width="0"
            class="login-form"
        >
          <el-form-item prop="role">
            <el-select v-model="loginForm.role" placeholder="请选择身份" @change="validateRole">
              <el-option label="学生" value="Student"></el-option>
              <el-option label="管理员" value="Admin"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入账号" clearable></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" show-password placeholder="请输入密码" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="el-button" @click="login('ruleFormRef')">完成</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, getCurrentInstance, reactive} from 'vue';
import {ElNotification} from "element-plus";
import request from "@/utils/request";
import router from "@/router";
const { proxy } = getCurrentInstance()

const rules = reactive({
  role: [{ required: true, message: '请选择身份', trigger: 'change' }],
  username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    }
)

const isFormValid = ref(false);
const validateRole = () => {
  const { role } = loginForm;
  isFormValid.value = role !== '';
}
const loginForm = reactive({
  username: '',
  password: '',
  role: '',
});
const login = () => {
  proxy.$refs.ruleFormRef.validate((valid) => {
    if (valid) {
      //往后台发请求
      //后台数据格式：("code","200","msg": "","data": null)
      request.post('/login',{
         username: loginForm.username,
         password: loginForm.password,
         role: loginForm.role
      }).then(res => {
        if (res.code === '200') {//请求成功
          localStorage.setItem('student-user',JSON.stringify(res.data.id))
          ElNotification(
              {
                type: 'success',
                message: '登录成功'
              })
          // 处理登录成功后的逻辑，比如跳转页面等
          switch (loginForm.role) {
            case 'Admin':
              router.push('/manager');
              break;
            case 'Student':
              router.push('/mbti');
              break;
          }
          } else {//请求失败
          ElNotification({
              type: 'error',
              message: res.msg
          })
        }
      })
    } else {
      ElNotification(
          {
            type: 'error',
            message: '用户名或密码错误'
          })
        }
})
}

</script>

<style scoped>
html, body {
  height: 100%;
}
.container {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}
.login-wrapper {
  background-color: #fff;
  width: 358px;
  height: 588px;
  border-radius: 15px;
  padding: 0 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.header {
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  line-height: 200px;
}
.form-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-form {
  width: 100%;
}

.el-button {
  width: 100%;
  margin-top: 20px;
  background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
  color: #fbf6fb;
  border-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}
.el-button:hover {
  background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
  border-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
}

</style>